<template>
    <div id="background">
        <el-container>
            <el-header style="height:280px">
                <changeHeader id="zhaoPinDetailHead">
                    <div id="zhaoPinDetailHeadHeight">
                        <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                            <el-col :xs="2" :sm="2" :md="2" :offset="1"  class="imgCol">
                                <img v-bind:src="backIcon" class="backSize" @click="back"/>
                            </el-col>
                            <el-col  :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                                <!-- <span class="titleSize" >{{gongSi.summary.companyName}}</span> -->
                                <span class="titleSize noHuanHang" >{{gongSi.summary.companyName}}</span>
                            </el-col>
                            <el-col  :xs="2" :sm="2" :md="2" :offset="6" class="imgCol">
                            <i class="el-icon-star-off" style="color:#ffffff;font-size:20px"></i>
                            </el-col>
                            <!-- <el-col :xs="2" :sm="2" :md="2" :offset="1"  class="imgCol">
                            <i class="el-icon-share" style="color:#ffffff;font-size:20px"></i>
                            </el-col> -->
                        </el-row>
                    </div>
                </changeHeader>
                <van-swipe style="height:200px">
                    <van-swipe-item v-for="pic in pictures" :key="pic" >
                        <img v-bind:src="pic" style="width:100%"  />
                    </van-swipe-item>
                </van-swipe>
                <div style="padding:10px;backgroundColor:#ffffff;height:55px">
                    <el-row>
                        <el-col :xs="14" :sm="12" :md="12">
                            <span class="words noHuanHang" style="font-size:14px">公司名称：{{gongSi.summary.companyName}}</span> 
                        </el-col>
                         <el-col :xs="10" :sm="12" :md="12">
                            <span class="words noHuanHang" style="font-size:14px">招聘岗位：{{professionName}}</span> 
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:10px">
                        <el-col :xs="14" :sm="12" :md="12">
                            <span class="moneyCss noHuanHang" style="font-size:14px">{{gongZiDaiYu.baseSalary}}元/月</span> 
                        </el-col>
                         <el-col :xs="10" :sm="12" :md="12">
                            <span class="words noHuanHang" style="font-size:14px">招聘人数：{{requirePopulation}}人</span> 
                        </el-col>
                    </el-row>
                </div>
                <div style="height:5px;backgroundColor:#f5f4f9"></div>
            </el-header>
            <el-main id="zhaoPinDetailMain"  style="backgroundColor:#ffffff">
                <!-- <el-scrollbar style="margin-top:20px"> -->
                    <div style="margin-top:10px">
                        <el-row style="margin-left:22px">
                                    <span class=" jianJieBox">工资待遇</span>
                        </el-row>
                        <div class="zhaoPinDetailBox">
<!--                            <el-row  style="margin-bottom:5px"><span class='words'>基本工资：{{gongZiDaiYu.baseSalary}}元/月</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words" >发薪日期：{{gongZiDaiYu.paySalaryDate}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">结算方式：{{gongZiDaiYu.payType}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">其他说明：{{gongZiDaiYu.salaryOtherNotice}}</span></el-row>-->
                          <el-input  class="zhaoPinDetailInput" readonly :value="gongZiDaiYu.baseSalary">
                            <span slot="prepend">基本工资</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="gongZiDaiYu.paySalaryDate">
                            <span slot="prepend">发薪工资</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="gongZiDaiYu.payType">
                            <span slot="prepend">结算方式</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="gongZiDaiYu.salaryOtherNotice">
                            <span slot="prepend">其他说明</span>
                          </el-input>
                        </div>
                    </div>
                    <div>

                      <el-row style="margin-left:22px">
                        <span class=" jianJieBox">住宿饮食</span>
                      </el-row>
                        <div class="zhaoPinDetailBox">
<!--                            <el-row  style="margin-bottom:5px"><span class='words'>住宿说明：{{liveAndFood.liveNotice}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words" >饮食说明：{{liveAndFood.foodNotice}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">社保说明：{{liveAndFood.socialSecurityNotice}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">其他说明：{{liveAndFood.liveFoodOtherNotice}}</span></el-row>-->
                          <el-input  class="zhaoPinDetailInput" readonly :value="liveAndFood.liveNotice">
                            <span slot="prepend">住宿说明</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="liveAndFood.foodNotice">
                            <span slot="prepend">饮食说明</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="liveAndFood.socialSecurityNotice">
                            <span slot="prepend">社保说明</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="liveAndFood.liveFoodOtherNotice">
                            <span slot="prepend">其他说明</span>
                          </el-input>
                        </div>
                    </div>
                     <div>

                       <el-row style="margin-left:22px">
                         <span class=" jianJieBox">岗位要求</span>
                       </el-row>
                        <div class="zhaoPinDetailBox">
<!--                            <el-row  style="margin-bottom:5px"><span class='words'>工作内容：{{gangWei.jobText}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words" >工作时间：{{gangWei.jobTimeNotice}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">工作方式：{{gangWei.jobWay}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">其他说明：{{gangWei.jobOtherNotice}}</span></el-row>-->
                          <el-input  class="zhaoPinDetailInput" readonly :value="gangWei.jobText">
                            <span slot="prepend">工作内容</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="gangWei.jobTimeNotice">
                            <span slot="prepend">工作时间</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="gangWei.jobWay">
                            <span slot="prepend">工作方式</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="gangWei.jobOtherNotice">
                            <span slot="prepend">其他说明</span>
                          </el-input>
                        </div>
                    </div>
                    <div>

                      <el-row style="margin-left:22px">
                        <span class=" jianJieBox">录用条件</span>
                      </el-row>
                        <div class="zhaoPinDetailBox">
<!--                            <el-row  style="margin-bottom:5px"><span class='words'>性别条件：{{needs.sexRequest}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words" >年龄条件：{{needs.ageRequest}}</span></el-row>-->
<!--                            <el-row  style="margin-bottom:5px"><span class='words'>学历条件：{{needs.eduBackground}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">经验条件：{{needs.expRequest}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words">证书条件：{{needs.credentialRequest}}</span></el-row>-->
<!--                            <el-row style="margin-bottom:5px"><span class="words" >其他说明：{{needs.employOtherNotice}}</span></el-row>-->
                          <el-input  class="zhaoPinDetailInput" readonly :value="needs.sexRequest">
                            <span slot="prepend">性别条件</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="needs.ageRequest">
                            <span slot="prepend">年龄条件</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="needs.eduBackground">
                            <span slot="prepend">学历条件</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="needs.expRequest">
                            <span slot="prepend">经验条件</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="needs.credentialRequest">
                            <span slot="prepend">证书条件</span>
                          </el-input>
                          <el-input  class="zhaoPinDetailInput" readonly :value="needs.employOtherNotice">
                            <span slot="prepend">其他说明</span>
                          </el-input>
                        </div>
                    </div>
                    <div>

                      <el-row style="margin-left:22px">
                        <span class=" jianJieBox">企业简介</span>
                      </el-row>
                        <div style="margin-left:22px;font-size:14px;padding:5px;margin-top:15px">
                            <el-row style="margin-bottom:5px">
                              <span class="words">{{gongSi.companyIntroduction}}</span>
                            </el-row>
                            <el-row >
                               
                                <el-col class="end">
                                    <span class='words'>联系方式：{{gongSi.contact}}</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="imgCol" @click="goToQiYeDetail">
                            <div  style="padding:10px 10px 6px 10px;backgroundColor:#f5f4f9;width:90%">
                                <el-container>
                                    <el-aside width="70px">
                                        <el-image
                                            style="width: 60px; height: 60px"
                                            :src="gongSi.summary.logo"
                                            fit="cover"
                                        />
                                    </el-aside>
                                    <el-main>
                                        <div >
                                            <span class="words noHuanHang">{{gongSi.summary.companyName}}</span>
                                        </div>
                                        <div>
                                            <van-rate v-model="rate" allow-half readonly></van-rate>
                                        </div>
                                        <el-row >
                                            <span class="words">{{gongSi.summary.nature}}</span>
                                            <el-divider direction="vertical"></el-divider>
                                            <span class="words">{{gongSi.summary.scale}}人</span>
                                        </el-row>
                                   
                                    </el-main>
                                </el-container>
                            </div>
                        </div>
                        <div style="height:60px">

                        </div>
                    </div>
            </el-main>
            <div style="backgroundColor:#ffffff;position:fixed;bottom:0px;width:100%">
                <el-row type="flex" class="imgCol" style="margin-bottom:10px">
                    <!-- <el-col  :xs="12" :sm="12" :md="12">
                        <button class="btnSendMessage">发送消息</button>
                    </el-col>
                    <el-col  :xs="12" :sm="12" :md="12">
                        <button class="btnBaoMingFree">免费报名</button> 
                    </el-col> -->
                    <el-col :xs="12" :sm="12" :md="12" class="end">
                         <button class="btnSendMessage">发送消息</button>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12">
                        <button class="btnBaoMingFree" @click="gangWeiBaoMing">免费报名</button> 
                    </el-col>
                </el-row>
            </div>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import { Swipe, SwipeItem ,Toast} from 'vant'
import changeHeader from '../common/changeHeader/changeHeader.vue'
export default {
    components:{
        changeHeader,
    },
    data(){
        return{
            rate:0,
            //公司id
            companyId:'',
            //岗位id
            postId:'',
            backIcon:backIcon,
            //绑定轮播图
            pictures:[],
            //绑定公司的简介信息
            gongSi:{
                companyIntroduction:'',
                summary:{
                    star:'',
                    nature:'',
                    companyName:'',
                    logo:'',
                    scale:'',
                },
                companyId:'',
                contact:'',
            },
            //绑定公司的在招岗位
            professionName:'',
            //绑定公司的在招人数
            requirePopulation:'',
            //绑定岗位详细信息
            gongZiDaiYu:{},
            liveAndFood:{},
            gangWei:{},
            needs:{},
        }
    },
    mounted(){
        var id=this.$route.query.id;
        var companyId=this.$route.query.companyId;
        this.postId=id;
        this.companyId=companyId;
        this.getGongSiInfo(id);
        this.getZhaoPinDetailInfo(id);

        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";
     

        var head=document.getElementById("zhaoPinDetailHead");
        var headH=document.getElementById("zhaoPinDetailHeadHeight");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";
        headH.style.height=headHeight+"px";

        // var main=document.getElementById("zhaoPinDetailMain");
        // var mainHeight=normalHeight/30*13;
        // console.log("mainHeight:"+mainHeight);
        // main.style.height=mainHeight+'px';
       
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        goToQiYeDetail(){
          console.log(this.companyId);
            this.$router.push({
                path:'/zhaoPin/qiYeDetail',
                query:{
                    companyId:this.companyId
                }
            })
        },
        //获取公司轮播图片和评分
        getGongSiInfo(id){
            var URL=this.IP.IP+'/company/pictureAndStars';
            console.log(URL);
            console.log(id);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    companyId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.pictures=response.data.data.pictures;
                   this.rate=response.data.data.stars;
                    console.log(this.pictures);
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取招聘详细信息
        getZhaoPinDetailInfo(id){
            var URL=this.IP.IP+'/post/info';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    id:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.liveAndFood=response.data.data.liveAndFood;
                   this.gongZiDaiYu=response.data.data.salary;
                   this.needs=response.data.data.employConditions;
                   this.gangWei=response.data.data.postRequest;
                   this.gongSi=response.data.data.companySummary;
                   this.professionName=response.data.data.professionName;
                   this.requirePopulation=response.data.data.requirePopulation;

                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //免费岗位报名
        gangWeiBaoMing(){
            var URL=this.IP.IP+'/post/enrollThePost';
            console.log(URL);
            this.$ajax({
                method:'post',
                url:URL,
                params:{
                   postId:this.postId
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   Toast(response.data.data);

                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
      
    } 
}
</script>
<style>
  .zhaoPinDetailInput .el-input__inner {
    border-style: none;
    border-bottom: 1px solid #f5f4f9;
    border-radius: 0px;
  }
  .zhaoPinDetailInput .el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #f5f4f9;

  }
  .zhaoPinDetailInput .el-input-group__append, .el-input-group__prepend {
    border-style: none;
    background-color:#fff;
    border-bottom: 1px solid #f5f4f9;
  }
.jianJieBox{
    border-bottom: 2px solid #53cdf5;
    padding: 5px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.noHuanHang{
    white-space: nowrap;
    overflow: hidden;
      text-overflow: ellipsis;
}
.btnSendMessage{
    background-color: #fff;
    height: 40px;
    width: 90%;
    color: #53cdf5;
    border:#53cdf5 1px solid;
    font-size: 1.125em;
    outline: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.btnBaoMingFree{
    background-color: #53cdf5;
    height: 40px;
    width: 90%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-style: none;
}
.zhaoPinDetailBox{
    margin: 10px;
    font-size:14px;
}

.moneyCss{
  color: #CC0000;
}
.van-swipe__indicator--active {
    background-color: #fff;

}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.el-main {
    padding: 0px ;
}
.el-header{
  padding:0px;
}
.el-footer {
    padding:0px;
}
.el-aside{
    padding: 0px;
}
#zhaoPinDetailHead{
    position:fixed;
    top:0;
    width: 100%;
    z-index: 2;

}
.words{
    color:#707070;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
